<template>
  <!-- <view>姓名:{{ person.username }}</view>
  <view>孩子年龄:{{ person.child.age }}</view>
  <button size="mini" @click="change">修改</button> -->
  <view>{{ person.car.price }}</view>
  <Footer></Footer>
  <button @click="handleClick">修改</button>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  shallowRef,
  shallowReactive,
  toRefs,
  provide,
  toRaw,
  markRaw,
} from "vue";
import Footer from "@/components/Footer.vue";

let person = reactive({
  name: "张三",
  car: {},
});
let car = markRaw({
  name: "宝马",
  price: 20,
});
person.car = car;

// let car = reactive({ name: "宝马" });
// // let newCar = toRaw(car);
// markRaw(car);
// console.log(car)
// // console.log(car, "$$$");
// provide("car", car);

const handleClick = function () {
  // car.name = "法拉利";
  person.car.price += 1;
};

// let person = shallowReactive({
//   username: "张三",
//   age: 21,
//   child: {
//     name: "小张三",
//     age: 5,
//   },
//   // address: {
//   //   city: "北京",
//   //   road: "我们的上庄路",
//   // },
// });

const change = function () {
  // let age = person.child.age;
  // age = age + 1;
  // person.username = "zhangsan";
  // person.child.age += 1;
  // console.log(person.child.age)
  // console.log(person)
  // person.age += 1;
  // person.address.city = "beijing";
  // person.address.road = "shangzhuang road";
  // person.value.address.road = "shangzhuanglu";
  // person.value = { username: "zhangsan", age: 22 };
};
</script>

<style style="less" scoped></style>
